<template>
    <div class="ye">
        <nav-bar>
            <template v-slot:default>订单详情</template>    
        </nav-bar>
        <div class="one">
            <div>
                <span>订单状态：</span>
                <span>{{statusString}}</span>
            </div>
            <div>
                <span>订单编号：</span>
                <span>{{detail.order_no}}</span>
            </div>
            <div>
                <span>下单时间：</span>
                <span>{{detail.created_at}}</span>
            </div>
            <div>
                <!-- <van-button type="primary" block class="bb" v-if="detail.status == 1" @click="showPayFn">去支付</van-button>
                <van-button  block class="bb" v-if="detail.status == 2">确认订单</van-button> -->
                <van-button type="primary" block class="bb"  @click="showPayFn">去支付</van-button>
                <van-button  block class="bb" @click="handleCconfirmOrder">确认订单</van-button>
            </div>
        </div>
        <div class="two">
            <div>
                <span>商品金额：</span>
                <span class="s">￥{{total+'.00'}}</span>
            </div>
            <div>
                <span>配送方式：</span>
                <span class="s">普通快递</span>
            </div>
        </div>
        <div class="there">
            <van-card
                v-for="item in detail.orderDetails.data" :key="item.id"
                :num = "item.num"
                :price = "item.price"
                desc="全场包邮"
                :title="item.goods.title"
                :thumb="item.goods.cover_url"
            />

        </div>
        <!-- <div style="width:100%;height:50px;"></div> -->

        <van-popup 
            v-model:show="showPay"
            position="bottom"
            :style="{height:'40%'}"
            @close="close"
        >
            <div :style="{width:'90%',margin:'0 auto',padding:'50px 0'}">
                <van-grid :border="false" :column-num="2">
                    <van-grid-item text="支付宝">
                        支付宝二维码<br>
                        <van-image width="150" height="150" :src="aliyun" />
                    </van-grid-item>
                    <van-grid-item text="微信">
                        微信二维码<br>
                        <van-image width="150" height="150" :src="wechat" />
                    </van-grid-item>
                </van-grid>
            </div>
        </van-popup>
    </div>
</template>
<script>
import {reactive,onMounted,toRefs,computed} from 'vue'
import {Toast,Dialog } from 'vant'
import {useRoute,useRouter} from 'vue-router'
import {useStore} from 'vuex'
import NavBar from 'components/common/navbar/NavBar'
// getOrderDetail-订单详情
// confirmOrder-确认订单
// payOrder-二维码
// payOrderStatus-查看状态
// viewExpress-物流详情
import {getOrderDetail,confirmOrder,payOrder,payOrderStatus,viewExpress,getOrderPreview} from 'network/order'
export default {
    components:{
        NavBar
    },
    setup(){
        const route = useRoute();
        const router = useRouter();
        const state = reactive({
            orderNo:'',//订单id
            detail:{ //订单详情
                orderDetails:{
                    data:[]
                },
                status:0
            },
            showPay:false,
            aliyun:'',
            wechat:''
        })
        const init = ()=>{
            // 获取订单的id
            // console.log(route.query);
            const {id} = route.query;
            state.orderNo = id;
            // 订单的详情
            getOrderDetail(state.orderNo).then(res=>{
                // console.log(res);
                // 将数据复制到对象detail中
                state.detail = res;
                state.address = res;
            })
        }
        // 查看邮件状态
        const statusString = computed(()=>{
            let status = ['','已下单','已支付','等待发货','确认收货','已过期'];
            return status[state.detail.status];
        })
        // 计算总价钱
        const total = computed(()=>{
            let sum = 0;
            state.detail.orderDetails.data.forEach(item=>{
                sum += item.num * item.price;
            })
            return sum;
        })
        onMounted(()=>{
            Toast.loading({message:'加载中....',forbidClick:true})
            init();
            Toast.clear();
        })
        // 点击订单
        const showPayFn = ()=>{
            state.showPay = true;

            payOrder(state.orderNo,{type:'aliyun'}).then(res=>{
                state.aliyun = res.qr_code_url;
                state.wechat = res.qr_code_url;
            })
            // 轮询查看
            const timer = setInterval(()=>{
                payOrderStatus(state.orderNo).then(res=>{
                    // console.log(res);
                    if(res == '2'){
                        clearInterval(timer);
                        state.showPay = false;
                    }
                    router.push({path:'/order'})
                })
            },1500)
        }
        const handleCconfirmOrder = ()=>{
            Dialog.confirm({
                title:'是否确认订单'
            }).then(()=>{
                router.push({path:'/order'})
                confirmOrder(state.orderNo).the(res=>{ 
                    Toast('确认成功！');
                    init();
                })
            }).catch(()=>{

            })
        }
        const close = ()=>{
            Dialog.close();
        }
        return{
            ...toRefs(state),
            statusString,
            total,
            showPayFn,
            handleCconfirmOrder,
            close
        }
    }
}
</script>
<style scoped lang="scss">
    .ye{
        margin-bottom: 60px;
    }
    .one{
        width: 100%;
        margin-top: 65px;
        text-align: left;
        padding-left: 20px;
        div{
            margin-bottom: 15px;
        }
        .bb{
            width: 95%;
            margin-bottom: 15px;
        }
    }
    .two{
        width: 100%;
        margin-top: 30px;
        text-align: left;
        padding-left: 20px;
        margin-bottom: 30px;
        border-bottom: 1px solid gray;
        div{
            margin-bottom: 15px;
        }
        .s{
            color: brown;
        }
    }
    .there{
        width: 100%;
        margin-right: 50px;
    }
</style>
